<template>
  <view class="deco-title-text" :style="[innerStyle]">
    <view class="deco-title-text__title" :style="[titleStyle]">{{ titleText }}</view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { styleSizeUnit, useDecoUnit } from "@/decoration/utils/style"
export default {
  name: "deco-title-text",
  mixins: [mixin],
  data() {
    return {
      layouts: []
    }
  },
  computed: {
    comStyle() {
      const style = {
        ...styleSizeUnit(this.data?.data.innerStyle)
      }
      return style
    },
    titleStyle() {
      const style = {}
      if (this.data.data.titleAlign) style["text-align"] = this.data.data.titleAlign
      if (this.data.data.titleWeight) style["font-weight"] = this.data.data.titleWeight
      if (this.data.data.titleSize) style["font-size"] = useDecoUnit(this.data.data.titleSize)
      if (this.data.data.titleColor) style.color = this.data.data.titleColor
      return style
    },
    titleText() {
      return this.data?.data.title
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.deco-title-text {
  width: 100%;
}
</style>
